@import "_reset.scss";
@import "../vendor/islider.min.css";
body {
	background: #F5F5F5;
	overflow: hidden;
}
.step1, .step2, .step3{
	display: none;
}
.one {
	.step1 {
		display: block;
	}
}
.two {
	.step2 {
		display: block;
	}
}
.three {
	.step3 {
		display: block;
	}
}
nav {
	position: relative;
	width: 100%;
	.nav-wrap{
		box-sizing: border-box;
		height: 2.16rem;
		padding: .8rem 0 0 .64rem;
		overflow-y: visible;
		background: inline-image("m/logo.png") #fff center .84rem no-repeat;
		background-size: 2.4rem .52rem;
	}
	.nav-btn{
		position: relative;
		width: .52rem;
		height: .56rem;
		&:before, &:after {
			transition: transform .1s ease-out;
			position: absolute;
			display: block;
			content: " ";
			left: 0;
			width: .56rem;
			height: .04rem;
			background: #FFD102;
		}
		&:before {
			top: .12rem;
		}
		&:after {
			bottom: .12rem;
		}
	}
	.nav-menu {
		transform: scaleY(0);
		transition: transform .1s ease-out;
		transform-origin: center top;
		position: absolute;
		z-index: 10001;
		top: 2.16rem;
		left: 0;
		width: 100%;
		background: #FFD102;
		padding-bottom: .88rem;
		ul, li{
			padding: .25rem 0;
			text-align: center;
		}
		li a{
			display: block;
			width: 100%;
			height: 100%;
			font-size: .3rem;
			line-height: .36rem;
			color: #fff;
		}
		.wx {
			bottom: .158rem;
			width: .45rem;
			height: .4rem;
			background: inline-image("m/wx1.png") no-repeat;
			background-size: .45rem .4rem;
		}
	}
	&.active {
		.nav-btn {
			&:before {
				top: .2rem;
				transform: rotate(45deg) translate(0%, 50%);
			}
			&:after {
				bottom: .28rem;
				transform: rotate(-45deg) translate(0%, -50%);
			}
		}
		.nav-menu {
			transform: scaleY(1);
		}
	}
}
.slider-wrap {
	box-sizing: border-box;
	position: relative;
	height: 2.04rem;
	padding-top: .32rem;
	.slider-item {
		p {
			text-align: center;
			font-size: .16rem;
			line-height: .2rem;
			color: #777777;
		}
		.p1 {
			font-size: .3rem;
			color: #1C3E58;
			line-height: .4rem;
		}
		.yellow {
			color: #FCC400;
		}
	}
	.islider-dot {
		width: .08rem;
		height: .08rem;
		box-shadow: 0 0 1px #777777;
	}
	.islider-dot.active {
		background: #25CE9E;
	}
}
.step1 {
	div.intro {
		padding: .2rem;
		box-sizing: border-box;
	}
	.section {
		padding-bottom: .1rem;
		text-align: center;
		overflow: hidden;
		color: #1C3E58;
		&.section1 {
			height: 2.92rem;
			background: url("../images/m/section1.png") center top no-repeat;
			background-size: cover;
		}
		&.flow {
			background: #fff;
		}
		a.btn {
			display: block;
			width: 2.26rem;
			height: .48rem;
			margin:  .24rem auto;
			border-radius: .24rem;
			color: #fff;
			font-size: .18rem;
			line-height: .48rem;
			box-shadow: 0 5px 8px rgba(0,0,0,0.5);
			background: #4088DA;
		}
		p {
			font-size: .18rem;
			line-height: .24rem;
		}
		.p1 {
			font-size: .3rem;
			line-height: .3rem;
			margin-bottom: .3rem;
		}
		.p2 {
			font-size: .24rem;
			line-height: .24rem;
			color: #25CE9E;
			margin: .3rem 0;
		}
		.textarea {
			p{
				width: 80%;
				padding: .06rem;
				margin: 0 auto;
				color: #000;
				font-size: .18rem;
				line-height: .24rem;
				&.title {
					line-height: .4rem;
					font-size: .3rem;
				}
			}
		}
	}
}
.cooperate {
	padding: .2rem 0 .6rem 0;
	background: #F5F5F5;
	p {
		font-size: .3rem;
		text-align: center;
		margin-bottom: .34rem;
	}
	ul {
		&:before, &:after {
			display: table;
			content: " ";
		}
		&:after {
			clear: both;
		}
	}
	li {
		float: left;
		width: 50%;
		text-align: center;
		border-bottom: 1px solid #999;
		&:nth-child(odd) {
			border-right: 1px solid #999;
			margin-right: -1px;
		}
		.helper {
		    display: inline-block;
		    height: 100%;
		    vertical-align: middle;
		}
		img {
			max-width: 80%;
			max-height: 80%;
			vertical-align: middle;
		}
	}
}
.form-row {
	margin: .16rem auto;
	width: 80%;
	input, textarea{
		display: block;
		width: 100%;
		height: .86rem;
		font-size: .24rem;
		color: #B1B1B1;
		line-height: .5rem;
		padding: .2rem;
		outline: none;
		-webkit-appearance: none;
		border-radius: 0;
		border: .02rem solid #C8C8C8;
	}
	textarea {
		margin-top: .38rem;
		height: 1.68rem;
		resize: none;
	}
}
.step2 {
	.section {
		padding-top: .24rem;
		height: 3.08rem;
		background: url("../images/m/section6.png") center bottom no-repeat;
		background-size: contain;
	}
	.join-us {
		background: #fff;
		padding-top: .64rem;
		padding-bottom: .2rem;
		p {
			text-align: center;
		}
		.p1 {
			color: #1C3E58;
			font-size: .36rem;
			line-height: .4rem;
		}
		.p2 {
			color: #777777;
			font-size: .16rem;
			line-height: .22rem;
		}
		.email-btn {
			text-align: center;
			background: inline-image("m/email.png") #4099FF .24rem center no-repeat;
			background-size: .22rem auto;
		}
		.p3 {
			color: #25CE9E;
			font-size: .24rem;
		}
	}
}
.step2 , .step3 {
	.btn {
		display: block;
		width: 2rem;
		height: .5rem;
		margin: .64rem auto .16rem;
		color: #fff;
		font-size: .18rem;
		line-height: .5rem;
		border-radius: .25rem;
		background-color: #4099FF;
	}
	.submit-btn {
		text-align: center;
	}
	.next-btn {
		text-align: center;
		background-color: #25CE9E;
	}
}
.step3 {
	padding-top: .24rem;
	.section {
		height: 2.4rem;
		background: url("../images/m/section7.png") center bottom no-repeat;
		background-size: contain;
	}
	.tab {
		border-top-right-radius: .06rem;
		border-top-left-radius: .06rem;
		overflow: hidden;
		&:before, &:after {
			display: table;
			content: " ";
		}
		&:after {
			clear:both;
		}
		li {
			float: left;
			width: 50%;
			height: .64rem;
			text-align: center;
			font-size: .2rem;
			line-height: .64rem;
			color: #515356;
			&.active {
				background: #FFD102;
				color: #fff;
			}
			&:first-child {
				background: #FFD102;
				color: #fff;
			}
		}
	}
	p {
		font-size: .14rem;
		color: #1C3E58;
		line-height: .4rem;
		text-align: center;
	}
	.btn {
		margin-bottom: .64rem;
	}
}
#business {
	display: none;
}
.next {
	#consume {
		display: none;
	}
	#business {
		display: block;
	}
	.tab {
		li:first-child {
			background: none;
			color: #515356;
		}
		li:last-child {
			background: #FFD102;
			color: #fff;
		}
	}
}
footer {
	box-sizing: border-box;
	padding: .1rem;
	background: #1C3E58;
	.top {
		position: relative;
		height: 1.16rem;
		border-bottom: .02rem solid rgba(255,255,255, .16);
		background: inline-image("m/logo.png") center .35rem no-repeat;
		background-size: 1.44rem .27rem;
		.wx{
			top: .8rem;
			width: .62rem;
			height: .52rem;
			background: inline-image("m/wx2.png") center no-repeat;
			background-size: .31rem .26rem;
		}
	}
	.bottom {
		height: 1.68rem;
		p {
			line-height: .36rem;
			text-align: center;
			font-size: .22rem;
			color: #fff;
			&.title {
				margin-top: .24rem;
				margin-bottom: .34rem;
				font-size: .18rem;
			}
		}
	}
}
.wx{
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
input[type="date"]:after {
  content: attr(placeholder)
}
#video_iframe {
	display: none;
	position: fixed;
	left:50%;
	top:50%;
	width:6.4rem;
	height: 3.2rem;
	transform: translate(-50%, -50%);
	iframe {
		width:6.4rem;
		height: 3.2rem;
		background: #000;
	}
	a {
		color: #fff;
		background-color: #e53935;
		font-size: .16rem;
		border-radius: .15rem;
		position: absolute;
		top: -0.15rem;
		right: -0.15rem;
		width: .3rem;
		height: .3rem;
		line-height: .3rem;
		text-align: center;
		cursor: pointer;
		-webkit-transition: all .2s;
		transition: all .2s;
		z-index: 10;
	}
}
